<template>
	<transition name="edit-address-page">
		<div id="edit-address-page" v-show="show_page">
			<transition name="edit-address-container">
				<div class="container" v-show="show_page">
					<div class="edit-address-page-header">
						<b-icon-x class="close-btn" @click="close" />
					</div>
					<div class="edit-address-page-content">
						<p class="edit-address-page-select-tips">请填写以下内容</p>
						<div class="edit-address-page-select-list">
							<b-form-input type="text" class="address-input" placeholder="请输入地址" v-model="input.address" />
							<b-form-input type="text" class="address-input" placeholder="请输入联系人姓名" v-model="input.name" />
							<b-form-input type="text" class="address-input" placeholder="请输入联系人手机号码" v-model="input.tel" />
							<b-form-checkbox class="address-checkbox" switch v-model="input.default">设为默认地址</b-form-checkbox>
						</div>
						<div class="edit-address-foot">
							<b-button variant="primary" class="edit-address-set-btn" ref="set_btn" @click="setAddress">
								<b-spinner v-if="loading" small label="EditAddress"></b-spinner>
								<div v-else>
									确 认
								</div>
							</b-button>
						</div>
					</div>
				</div>
			</transition>
		</div>
	</transition>
</template>

<script>
	import {BIcon, BIconX } from 'bootstrap-vue'
	import layer from 'layui-layer'
	
	export default {
		inject: [
			'reload_view'
		],
		components: {
			BIcon,
			BIconX
		},
		data() {
			return {
				show_page: false,
				display: false,
				input: {
					id: null,
					address: '',
					name: '',
					tel: '',
					default: false
				},
				loading: false
			};
		},
		props: {
			show: false,
			type: null,
			item: null
		},
		methods: {
			page_display() {
				this.display = !this.display
			},
			close() {
				this.$emit('update:show', false)
			},
			setAddress() {
				if(!this.loading) {
					this.loading = !this.loading
					
					this.$axios.post('/address/' + (this.type == 'new' ? 'add' : 'modify'), this.input).then(resp => {
						if(resp.ret == 0) {
							this.$msg('操作成功')
							this.close()
							this.reload_view()
						}
						
						this.loading = !this.loading
					})
				}
			}
		},
		mounted() {
			this.show_page = this.show
		},
		watch: {
			show(newVal, oldVal){
				this.show_page = newVal
				this.display = this.show
			},
			type(val) {
				if(val == 'new') this.input = {}
			},
			item(val){
				if(this.type != 'new') this.input = val
				else this.input = {}
			}
		}
	}
</script>

<style>
	#edit-address-page {
		z-index: 2147483647;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
	}
	#edit-address-page .container {
		margin-top: 3vh;
		padding: 10px;
		height: 97vh;
		background-color: #fff;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}
	
	.edit-address-page-enter-active, .edit-address-page-leave-active {
		transition: all .3s ease;
	}
	.edit-address-page-enter-active {
		opacity: 1;
	}
	.edit-address-page-leave-to {
		opacity: 0;
	}
	
	.edit-address-container-enter-active, .edit-address-container-leave-active {
		transition: all .2s ease;
	}
	.edit-address-container-enter, .edit-address-container-leave-to {
		transform: translateY(6.25rem);
		opacity: 0;
	}
	
	.close-btn {
		float: left;
		font-size: 1.5625rem;
	}
	
	.edit-address-page-header {
		height: 20px;
		margin: 0.3125rem auto;
	}
	.edit-address-page-content {
		padding-top: 1.25rem;
	}
	.edit-address-page-select-tips {
		font-size: 1.5625rem;
	}

	.address-input {
		margin: 0.625rem 0;
		border: 0;
		border-bottom: 1px solid #ced4da;
		border-radius: 0;
	}
	.address-input:focus {
		border-color: #80bdff;
		box-shadow: none;
	}

	.address-checkbox {
		margin-left: 0.3125rem;
	}

	.edit-address-select-item-selected {
		border-color: #0069d9
	}
	
	.edit-address-foot {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 1.875rem;
	}
	.edit-address-set-btn {
		width: 100%;
		max-width: 50rem;
	}
</style>
